/**
 * Created by jxh on 2018/11/19.
 */

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
const path = require('path')


// 启用热更新的 第2步
const webpack = require('webpack')

//在内存中，根据指定的模板页面，生成一份内存中的首页，同事自动把打包好的bundle注入到页面底部
// 如果到配置插件 ，需要在导出的对象中，挂载一个plugins

//在内存中生成html页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')


//当以命令形式运行webpack 或者 webpack-dev-server 的时候，工具会发现并没有提供要打包的文件的 入口 和 出口 文件 ，此时，他会检查项目跟目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建

module.exports = {
    
    // 入口，表示，要使用 webpack 打包哪个文件
    entry: path.join(__dirname, './src/main.js'),
    // 输出文件相关的配置
    output: {
        // 指定 打包好的文件，输出到哪个目录中去
        path: path.join(__dirname, './dist'),
        // 这是指定 输出的文件的名称
        filename: 'bundle.js'
    },
    plugins: [
        // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
        new webpack.HotModuleReplacementPlugin(),
        
        new htmlWebpackPlugin({
            // 创建一个 在内存中 生成 HTML  页面的插件
            template: path.join(__dirname, './src/index.html'),
            // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
            filename: 'index.html' // 指定生成的页面的名称
        })
    ],
    
    // devServer: {
    //     // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    //     //  --open --port 3000 --contentBase src --hot
    //
    //     open: true,
    //     port: 3000,
    //     contentBase: 'src',
    //     hot: true// 启用热更新的 第1步
    // },
    
    // 这个节点，用于配置 所有 第三方模块 加载器
    module: {
        // 所有第三方模块的 匹配规则
        rules: [
            //  配置处理 .css 文件的第三方loader 规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 配置处理 .less 文件的第三方 loader 规则
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // 配置处理 .scss 文件的 第三方 loader 规则
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            
            //limit 给定的值，是图片的大小，单位是字节 ，如果我们引用的图片，大于或等于limit 值 ，则不会被转为base格式的字符串，如果图片小于给定的limit值，则不会被转为babase64字符串
    
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=26,915'},
            //处理 字体文件的 loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            
            // // 配置 Babel 来转换高级的ES语法
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
    
            { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
        ]
    },
    
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
            // "vue$": "vue/dist/vue.js"
        }
    }

}